<template>
  <div class="Faker" ref="wrapper">
    <div class="content"   >
      <div class="faker-good">
        <p class="faker-p">品类管理</p>
      </div>
      <div style="margin-top: 20px;margin-left: 40px" class="faker-content">
        <template>
          <el-table
            :data="list"
            border>
            <el-table-column
              prop="id"
              label="品类Id">
            </el-table-column>
            <el-table-column
              prop="name"
              label="品类名称">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <span style="color: #000" @click="move(scope.row)">修改名称</span>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
  import {fakerlist, fakersave} from "../../http/index.js";
  // import Bscroll from 'better-scroll'
  export default {
        name: "Fakerlist",
        data(){
          return{
            list:[]
          }
        },
        mounted() {
            this.fakerlist()
          this.scroll = new Bscroll(this.$refs.wrapper)
        },
        methods:{
            async fakerlist(){
              const  res =fakerlist(this.$route.query.id).then(res=>{
                this.list=res.data.data
              })
            },
          move(v){
            this.$prompt("请输入修改内容", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              inputValue: v.name
            })
              .then(({value})=>{
                fakersave({
                  id:v.id,
                  name:value
                }).then((res)=>{
                  fakerlist(this.$route.query.id).then(data=>{
                    this.list=data.data.data
                    this.$message({
                      type: "success",
                      message: res.data.data
                    })
                  })
                })
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "取消修改"
                });
              });
          }
        }
    }
</script>

<style lang="scss" scoped>
  @import "../../Scss/index.scss";
  .Faker{
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    .faker-content{

    }
    .faker-good{
      display: flex;
      justify-content: space-between;
      .faker-p{
        @include FontOnly(40px);
        @include Mlt(40px,40px)
      }
      .faker-p1{
        @include Mlt(40px,40px)
      }
    }
    .el-table--border{
    }

  }
</style>
